<template>
	<view class="root">
		<view class="main fs-24 mt-60 ml-30 mr-30 bgc-fff mb-50 color-666">
			<label class="ai-center">
				<text class="mr-24 f1 text-center">{{ pageData.text }}</text>
				<icons type="refresh" size="24" color="#999" @click="getData" />
			</label>
			<view class="ai-center">
				<text class="mt-30 fs-30">支付宝付款二维码:</text>
				<image class="qrcode mt-30" :src="pageData.url" />
			</view>

			<!-- <text class="mt-26">提示：请将支付链接发送至付款人付款</text> -->
		</view>
		<view @click="saveImage" class="save-btn fs-36 br-42"
			>保存二维码并打开淘宝</view
		>
	</view>
</template>

<script>
	import icons from "@/components/icons";
	export default {
		components: { icons },
		data: () => ({ pageData: {} }),
		onLoad({ oid }) {
			this.oid = oid;
			this.getData();
		},
		methods: {
			saveImage() {
				uni.downloadFile({
					url: this.pageData.save_url,
					success(res) {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success() {
									uni.showToast({
										title: "保存成功",
										icon: "success",
										mask: true,
										duration: 1200,
										success: (_) => {
											setTimeout(() => {
												uni.reLaunch({
													url: "/pages/order",
												});
												let params = {};
												if (plus.os.name == "Android") {
													params = {
														pname: "com.taobao.taobao",
													};
												} else {
													params = {
														action: "taobao://",
													};
												}

												plus.runtime.launchApplication(
													params,
													(e) => {
														uni.showToast({
															title: "请检查是否有安装淘宝！",
															icon: "none",
														});
													}
												);
											}, 1200);
										},
									});
								},
								fail() {
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none",
									});
								},
							});
						}
					},
				});
			},
			getData() {
				uni.fetch("/api/order/get_alipay", {
					method: "post",
					data: { oid: this.oid, type: 1 },
					success: (res) => (this.pageData = res),
				});
			},
		},
	};
</script>

<style>
	.main {
		box-shadow: 0 5rpx 20rpx 0 rgba(151, 166, 192, 0.22);
		border-radius: 20rpx;
		padding: 30rpx 25rpx;
	}

	.bb-eb {
		border-bottom: 1rpx solid #ebebeb;
	}

	.save-btn {
		margin: 90rpx;
		text-align: center;
		justify-content: center;
		padding: 18rpx 0;
		color: #fff;
		background: linear-gradient(90deg, #8ec5fc, #4388e7);
	}

	.qrcode {
		width: 300rpx;
		height: 300rpx;
	}
</style>